<template>
  <div class="student-info-container  userDfd">
    <div style="display: grid;grid-template-columns: 1fr 2fr;gap: 20px">
    <!-- 头部信息 -->
    <div class="student-header">
      <div class="avatar-box" :style="{ backgroundImage: `url(${studentData.avatarUrl || defaultAvatar})` }" style="display: flex ;justify-content: flex-end;">
        <div class="update-avatar-btn"  >更换照片</div>
      </div>
      <div style="display: flex;  flex-direction: column;justify-content: space-between;">
        <h2>{{ studentData.basicInfo.name }}
          <el-icon v-if="studentData.basicInfo.gender === '男'" style="color:#6C96FF;">
            <Female/>
          </el-icon>
          <el-icon style="color:#cd1f7b;" v-else>
            <Male/>
          </el-icon>

        </h2>
      <div class="basic-header-info">
        <p>{{ studentData.schoolInfo.class }} | {{ studentData.schoolInfo.studentType }} | {{ studentData.basicInfo.politicalStatus }}</p>
        <p style="color: #46668C">学号: {{ studentData.schoolInfo.studentId }}</p>
      </div>
      <div class="header-actions">
        <el-tag type="primary" size="large">班长</el-tag>
        <el-tag type="primary" size="large">语文课代表</el-tag>
        <el-tag type="primary" size="large">唱歌</el-tag>
      </div>
      </div>
    </div>

    <!-- 基础信息 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>基础信息</span>
          <el-button v-if="!editingSection.basicInfo" type="primary" link @click="startEdit('basicInfo')">编辑</el-button>
          <div v-else>
            <el-button type="success" link @click="saveSection('basicInfo')">保存</el-button>
            <el-button type="danger" link @click="cancelEdit('basicInfo')">取消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="studentData.basicInfo" label-width="100px" :disabled="!editingSection.basicInfo" :label-position="'top'">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="studentData.basicInfo.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-input v-model="studentData.basicInfo.gender"/>
              <!--<el-select v-model="studentData.basicInfo.gender" placeholder="请选择性别">-->
              <!--  <el-option label="男" value="男" />-->
              <!--  <el-option label="女" value="女" />-->
              <!--</el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号">
              <el-input v-model="studentData.basicInfo.idNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出生年月日">
              <el-date-picker v-model="studentData.basicInfo.birthDate" type="date" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="籍贯">
              <el-input v-model="studentData.basicInfo.nativePlace" placeholder="未填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族">
              <el-input v-model="studentData.basicInfo.ethnicity" placeholder="未填写" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="政治面貌">
              <el-input v-model="studentData.basicInfo.politicalStatus" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    </div>
    <div style="display: grid;grid-template-columns: 1fr 1fr;gap: 20px">

    <!-- 家庭住址 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>家庭住址</span>
          <div class="card-header-note">根据监护人地址自动获取</div>
          <el-button v-if="!editingSection.address" type="primary" link @click="startEdit('address')">编辑</el-button>
          <div v-else>
            <el-button type="success" link @click="saveSection('address')">保存</el-button>
            <el-button type="danger" link @click="cancelEdit('address')">取消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="editingData.address" label-width="100px" :disabled="!editingSection.address" :label-position="'top'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="家庭住址1">
              <el-input v-model="editingData.address.address1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址1">
              <el-input v-model="editingData.address.address1Copy" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="家庭住址1">
              <el-input v-model="editingData.address.address1Another" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 在校信息 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>在校信息</span>
          <el-button v-if="!editingSection.schoolInfo" type="primary" link @click="startEdit('schoolInfo')">编辑</el-button>
          <div v-else>
            <el-button type="success" link @click="saveSection('schoolInfo')">保存</el-button>
            <el-button type="danger" link @click="cancelEdit('schoolInfo')">取消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="editingData.schoolInfo" label-width="100px" :disabled="!editingSection.schoolInfo" :label-position="'top'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班级">
              <el-input v-model="editingData.schoolInfo.class" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入学信息">
              <el-date-picker v-model="editingData.schoolInfo.enrollDate" type="date" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="editingData.schoolInfo.studentId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生类型">
              <el-input v-model="editingData.schoolInfo.studentType" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学籍号">
              <el-input v-model="editingData.schoolInfo.schoolRollNumber" placeholder="未填写" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    </div>
    <div style="display: grid;grid-template-columns: 1fr 1fr;gap: 20px">
    <!-- 健康信息 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>健康信息</span>
          <el-button v-if="!editingSection.healthInfo" type="primary" link @click="startEdit('healthInfo')">编辑</el-button>
          <div v-else>
            <el-button type="success" link @click="saveSection('healthInfo')">保存</el-button>
            <el-button type="danger" link @click="cancelEdit('healthInfo')">取消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="editingData.healthInfo" label-width="100px" :disabled="!editingSection.healthInfo" :label-position="'top'">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="身高">
              <el-input v-model="editingData.healthInfo.height">
                <template #suffix>cm</template>

              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重">
              <el-input v-model="editingData.healthInfo.weight">
                <template #suffix>kg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="左眼视力">
              <el-input v-model="editingData.healthInfo.leftEyesight" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="右眼视力">
              <el-input v-model="editingData.healthInfo.rightEyesight" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="腰围">
              <el-input v-model="editingData.healthInfo.waistline">
                <template #suffix>cm</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="静心心率">
              <el-input v-model="editingData.healthInfo.heartRate">
                <template #suffix>bpm</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="肺活量">
              <el-input v-model="editingData.healthInfo.vitalCapacity">
                <template #suffix>ml</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="血压">
              <el-input v-model="editingData.healthInfo.bloodPressure">
                <template #suffix>mmHG</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="BMI">
              <el-input v-model="editingData.healthInfo.bmi" >

              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重指数">
              <el-input v-model="editingData.healthInfo.weightIndex" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="周运动时长">
              <el-input v-model="editingData.healthInfo.weeklyExerciseDuration">
                <template #suffix>小时</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="周运动次数">
              <el-input v-model="editingData.healthInfo.weeklyExerciseFrequency">
                <template #suffix>次</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 监护人信息 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>监护人信息</span>
          <el-button v-if="!editingSection.guardianInfo" type="primary" link @click="startEdit('guardianInfo')">编辑</el-button>
          <div v-else>
            <el-button type="success" link @click="saveSection('guardianInfo')">保存</el-button>
            <el-button type="danger" link @click="cancelEdit('guardianInfo')">取消</el-button>
          </div>
        </div>
      </template>
      <el-form :model="editingData.guardianInfo" label-width="100px" :disabled="!editingSection.guardianInfo" :label-position="'top'" class="rowForm">
        <div v-for="(guardian, index) in editingData.guardianInfo.guardians" :key="index" class="guardian-item">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="监护人姓名">
                <el-input v-model="guardian.name" >
                  <template #suffix >
                    <el-tag type="primary">{{ guardian.names }}</el-tag>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="联系方式">
                <el-input v-model="guardian.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="身份证号">
                <el-input v-model="guardian.idNumber" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="家庭住址">
                <el-input v-model="guardian.address"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 默认头像
const defaultAvatar = '@/assets/images/dfdnv.png'

// 学生数据
const studentData = reactive({
  avatarUrl: '',
  basicInfo: {},
  address: {},
  schoolInfo: {},
  healthInfo: {},
  guardianInfo: {
    guardians: []
  }
})


// 编辑数据的副本
const editingData = reactive({
  basicInfo: {},
  address: {},
  schoolInfo: {},
  healthInfo: {},
  guardianInfo: {
    guardians: []
  }
})

// 控制编辑状态
const editingSection = reactive({
  basicInfo: false,
  address: false,
  schoolInfo: false,
  healthInfo: false,
  guardianInfo: false
})

// 开始编辑某个部分
const startEdit = (section) => {
  // 深度复制数据到编辑副本
  if (section === 'guardianInfo') {
    editingData[section] = {
      guardians: JSON.parse(JSON.stringify(studentData[section].guardians))
    }
  } else {
    editingData[section] = JSON.parse(JSON.stringify(studentData[section]))
  }
  editingSection[section] = true
}

// 保存编辑的部分
const saveSection = (section) => {
  // 真实场景中这里会有API调用
  Object.assign(studentData[section], editingData[section])
  editingSection[section] = false
  ElMessage.success('保存成功')
}

// 取消编辑
const cancelEdit = (section) => {
  editingSection[section] = false
  ElMessage.info('已取消编辑')
}
// 获取学生数据
const fetchStudentData = async (studentId) => {

  try {
    // 这里替换为实际的API调用
    // const response = await fetch(`/api/students/${studentId}`)
    // const data = await response.json()

    // 模拟API响应
    const data = {
      avatarUrl: 'https://api.vvhan.com/api/avatar/dm',
      basicInfo: {
        name: '张德清',
        gender: '男',
        idNumber: '331002188983876346',
        birthDate: '2022-11-08',
        nativePlace: '武汉',
        ethnicity: '汉',
        politicalStatus: '共青团员'
      },
      address: {
        address1: '浙江省台州市椒江区龙泉街道八振村281号',
        address1Copy: '浙江省台州市椒江区龙泉街道八振村281号',
        address1Another: '浙江省台州市椒江区龙泉街道八振村281号'
      },
      schoolInfo: {
        class: '二年级(2)班',
        enrollDate: '2022-09-01',
        studentId: '2022100048',
        studentType: '非晚自习课校生',
        schoolRollNumber: ''
      },
      healthInfo: {
        height: '150',
        weight: '38',
        leftEyesight: '5.0',
        rightEyesight: '5.0',
        waistline: '55',
        heartRate: '98',
        vitalCapacity: '3500',
        bloodPressure: '110',
        bmi: '22.2',
        weightIndex: '正常',
        weeklyExerciseDuration: '6',
        weeklyExerciseFrequency: '10'
      },
      guardianInfo: {
        guardians: [
          {
            name: '张得德',
            phone: '18033878829',
            idNumber: '331002999838276371',
            address: '浙江省台州市椒江区龙泉街道八振村281号',
            names:'父亲'
          },
          {
            name: '张得德',
            phone: '18033878829',
            idNumber: '331002999838276371',
            address: '浙江省台州市椒江区龙泉街道八振村281号',
            names: '直属亲属'
          }
        ]
      }
    }

    // 更新学生数据
    Object.keys(data).forEach(key => {
      if (studentData[key]) {
        Object.assign(studentData[key], data[key])
      } else {
        studentData[key] = data[key]
      }
    })
  } catch (error) {
    console.error('获取学生数据失败:', error)
    ElMessage.error('获取学生数据失败')
  }
}
onMounted(() => {
  // 从路由参数或父组件传递获取学生ID
  const studentId = '2022100048' // 这里可以从路由或props获取
  fetchStudentData(studentId)
})

</script>

<style scoped lang="scss">
@import "@/assets/styles/userDefined.scss";

.student-info-container {
  padding: 20px;
}
.student-header {
  display: flex;
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;
}

.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  width: 140px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #C9D8FF;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.update-avatar-btn {
  font-size: 14px;
  color: white;
  background:  #00000066;
  width: 100%;
  height: 33px;
  border-radius: 0 0 10px 10px;
  text-align: center;
  padding: 5px;
}

.basic-header-info {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.basic-header-info h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.basic-header-info p {
  margin: 5px 0;
  color: #000;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-note {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
  margin-right: auto;
}

.guardian-item {
  //margin-bottom: 15px;
}
</style>
```

